<template>
  <div>
    <div class="hot">
      <div class="top">
        <p>热销榜</p>
        <span class="pp"> 更多&gt;</span>
      </div>
      <div class="bb">
        <div class="good" v-for="(v, index) in imgs" :key="index">
          <img :src="v" alt="" />
          <span>{{ text[index] }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import service from "../../utlis/request";
export default {
  data() {
    return {
      imgs: [],

      text: [],
      befor: [],
      money: [],
    };
  },
  mounted() {
    service({
      url: "http://localhost:3000/HotList",
      method: "get",
    }).then((res) => {
      this.imgs = res.data[0].data.img;
      this.text = res.data[0].data.text;

      console.log(res.data);
    });
  },
};
</script>

<style scoped>
.hot {
  margin: 10px;
  height: 10.5625rem;
  border-radius: 10px;
  background-color: #fff;
}
.top {
  height: 1.625rem;
  display: flex;
  margin: 5px 10px;
  justify-content: space-between;
}
.hot p {
  font-size: 18px;
}
.bb {
  margin: 5px 10px;

  height: 8.0625rem;
  display: flex;
  overflow: auto;
}
.bb .good {
  width: 5.3125rem;
  margin-left: 15px;
}
.bb .good img {
  width: 5.3125rem;
  height: 5.3125rem;
}
.bb .good span {
  font-size: 16px;
  margin-top: -1.5vw;
  color: #8d939c;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
</style>